<template>
<div class="route">
    <div class="rout">
    <img :src="xiaoming.products_img" alt />
    <p class="black">{{xiaoming.products_introduce}}</p>    <!-- 商品介绍 -->
    <p class="white">   
      <span class="gprice">{{xiaoming.products_reality_price}}</span>   <!-- {{v.coffee_reality_price}}商品现价 -->
      <span class="oprice">
        <del>{{xiaoming.products_original_price}}</del>   <!-- {{v.coffee_original_price}}商品现价 -->
      </span>
    </p>
    <p class="lastp">
        <span class="last">已售卖 <span>{{xiaoming.products_sold_out}}</span>件 </span>
      <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-gouwuche" />
      </svg>
    </p>
    
  </div>
  
</div>
  
</template>

<script>
export default {
  props:["xiaoming"],

};
</script>

<style scoped>

.icon {
    top: 0.05rem;
  position: absolute;
    right: 0.1rem;
  width: 0.2rem;
  height: 0.2rem;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
/* .icon use{
  width: 0.1rem;
  height: 0.1rem;
} */
.lastp{
    position: relative;
    /* background-color: blueviolet; */
    height: 0.3rem;
    line-height: 0.3rem
}
.last{
    color: 0.1rem;
}
.gprice{
    color: red;
}
.rout{
  width: 1.7rem;
  height: 2.4rem;
}
.black{
    margin-top: -0.1rem;;
    
    /* background-color: aquamarine; */
    height: 0.3rem;
    font-size: 0.1rem;
    line-height: 0.3rem;
}
.white{
    height: 0.3rem;
    line-height: 0.3rem;
    margin-top: 0.1rem;;
    /* background-color: red; */

}
</style>